
<template>
  <el-card v-loading="cardLoading">
    <div class="card-header">
      <el-button @click="Init">
        <el-icon style="vertical-align: middle;">
          <RefreshLeft />
        </el-icon>
        <span style="vertical-align: middle;">重置</span>
      </el-button>
      <el-button type="primary" @click="handleAdd">
        <el-icon style="vertical-align: middle;">
          <CirclePlus />
        </el-icon>
        <span style="vertical-align: middle;" v-permission="['photo:data:add']" >新增</span>
      </el-button>
    </div>
    <!-- 实现表格和分页 -->
    <el-table :data="userList" border :table-layout="tableLayout" :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }">
      <el-table-column type="index" label="序号" porp="dataset_id"></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="数据集名称" prop="dataset_name"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.status === 'normal'">可用</el-tag>
          <el-tag type="warning" v-else>不可用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="auto" min-width="280px">
        <template v-slot="scope">
          <el-row :gutter="20" class="flex justify-center">
            <el-tooltip content="删除" placement="top" class="btn">
              <el-button type="danger" @click="handleDelete(scope.row.dataset_id)" icon="Delete"  v-permission="['photo:data:delete']" />
            </el-tooltip>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增组件 -->
    <form-dialog ref="addRef" :title="addTitle" destroyOnClose @submit="addSubmit" @clean="cleanPwdForm">
      <el-form ref="addFormRef" :rules="addrules" :model="addForm" label-width="80px" size="small">
        <el-form-item label="名称" prop="dataset_name">
          <el-input placeholder="请输入数据集名字" v-model="addForm.dataset_name"></el-input>
        </el-form-item>
      </el-form>
    </form-dialog>

  </el-card>
</template>

<script setup>
import {
  getDataList,
  createDataList,
  deleteDataList
} from '~/api/photoList.js'
import { ref, onMounted, reactive } from 'vue'
import FormDialog from '~/components/FormDialog.vue'
import {
  toast,
  showModal
} from '~/composables/util.js'

const cardLoading = ref(false)
const type = 'IMAGE_CLASSIFICATION'
const userList = ref([])
const tableLayout = ref('fixed')


async function Init() {
  cardLoading.value = true
  const body = {
    type
  }
  await getDataList(body).then(res => {
    console.log(res)
    if (res.data.data !== null) {
      userList.value = res.data.data.results
    } else {
      toast(res.data.msg, 'warning', false, 3000)
    }
  })
  cardLoading.value = false
}

onMounted(() => {
  Init()
})

function cleanPwdForm() {
  // 清空密码表单的逻辑
  addFormRef.value.resetFields()
}



//新增开始
// 属性声明
const addRef = ref(null);  // 新增组件的引用
const addFormRef = ref(null); //新增表单的引用
const addForm = reactive({});  // 新增表单数据
const addTitle = '新增';  // 新增组件的标题
const addrules = {
  dataset_name: [
    {
      required: true,
      message: '数据集不能为空',
      trigger: 'blur'
    },
  ]
};  // 新增表单的校验规则

//新增按钮
function handleAdd() {
  addRef.value.open()
  addRef.value.hideLoading()
}

// 处理新增表单提交的逻辑
function addSubmit() {
  console.log(addForm)
  addFormRef.value.validate(async (valid) => {
    const form = { type, ...addForm }
    console.log('提交的数据为:')
    console.log(form)
    addRef.value.showLoading()
    if (!valid) {
      addRef.value.hideLoading()
      return false
    } else {
      await createDataList(form).then(res => {
        console.log(res)
        if (res.data.data !== null && !res.data.data.error_code) {
          toast('添加成功', 'success', false, 3000)
          addRef.value.close()
          addRef.value.hideLoading()
          Init()
        } else if (res.data.data.error_code) {
          toast(res.data.data.error_msg, 'warning', false, 3000)
        } else {
          toast(res.data.msg, 'warning', false, 3000)
        }
      })
    }
  })
}
//新增结束


//删除开始
const handleDelete = function (dataset_id) {
  const body = {
    type,
    dataset_id
  }
  showModal('是否要删除该数据?').then(async () => {
    toast('正在删除中...', 'info', false, 3000)
    await deleteDataList(body).then(res => {
      if (res.data.data !== null && !res.data.data.error_code) {
        toast('删除成功', 'success', false, 3000)
      } else if (res.data.data.error_code) {
        toast(res.data.data.error_msg, 'warning', false, 3000)
      } else {
        toast(res.data.msg, 'warning', false, 3000)
      }
      Init()
    }).finally(() => {
    })
  }).catch(err => {
    console.log(err)
  })
}
//删除结束

</script>

<style scoped>
.form {
  @apply flex justify-start items-center
}

.btn {
  margin: 0 10px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.roleList-scrollbar {
  max-width: 800px;
  max-height: 160px;
}
</style>